/**
 * 文件预览指令
 * 使用方式 v-preview=["fileName", "href", "exts"]
 * 需要删除不能预览的文件dom请使用 v-preview.delete=["fileName", "href", "exts"]
 * @Prop fileName 文件名
 * @Prop href 文件地址
 * @Prop exts 筛选的文件类型
 */
import Vue from 'vue'
import { globalToolModule } from './index'
const extArr = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'txt', 'png', 'jpg', 'gif', 'jpeg', 'bmp', 'mp3', 'mp4']
const fun = (el, binding) => {
  const [fileName, href, exts] = binding.value
  const useExts = exts || extArr
  const modifiers = binding.modifiers
  const ext = fileName.split('.').pop().toLowerCase()
  if (useExts.includes(ext)) {
    const event = (e) => {
      if (modifiers.prevent) {
        e.preventDefault()
      }
      if (modifiers.stop) {
        e.stopPropagation()
      }
      // console.info(`🔉:使用指令预览文件[${fileName}]`)
      globalToolModule.setPreviewFile([fileName, href])
      globalToolModule.setPreviewDialog(true)
    }
    el.onclick = event
  } else {
    if (modifiers.delete && el.parentNode) {
      el.parentNode.removeChild(el)
    }
  }
}

const previewFileDriective = {
  inserted: fun,
  update: fun
}

Vue.directive('preview', previewFileDriective)
